/*
  学习目标：封装鉴权路由 - 
  复用组件逻辑:
    1. RenderProps
    2. hoc
    3. hooks
  步骤：
     1. 
     2. 
     3. 
*/

import React from "react";
import { Router, Switch, Route, Redirect } from "react-router-dom";
import NotFound from "./pages/NotFound";

import history from "@/utils/history";
import Article from "./pages/Article";
import Chat from "./pages/Profile/Chat";
import ProfileEdit from "./pages/Profile/Edit";
import ProfileFeedback from "./pages/Profile/Feedback";
import Search from "./pages/Search";
import Result from "./pages/Search/Result";
import Test from "./pages/Test";
import { AuthRoute } from "./components/AuthRoute/AuthRoute";
const Login = React.lazy(() => import("@/pages/Login"));
const Layout = React.lazy(() => import("@/pages/Layout"));

export default function App() {
  return (
    <Router history={history}>
      <React.Suspense fallback={<div>....加载中...</div>}>
        <Switch>
          <Redirect from="/" to="/layout" exact />
          <Route path="/login" component={Login} />
          <Route path="/layout" component={Layout} />
          <Route path="/search" component={Search} />
          <Route path="/article/:id" component={Article} />
          <Route path="/search/result" component={Result} />
          <AuthRoute path="/profile/edit" component={ProfileEdit} />
          <AuthRoute path="/profile/feedback" component={ProfileFeedback} />
          <AuthRoute path="/profile/chat" component={Chat} />
          <Route path="/test" component={Test} />
          <Route component={NotFound} />
        </Switch>
      </React.Suspense>
    </Router>
  );
}
